import React from "react";
import { Button, Col, Divider, message, Row, Spin } from "antd";
import styles from "@/pages/Account/accessSettings/siteAccess.css";
import TopInfo from "@/pages/Account/accessSettings/topInfo";
import { webSettingInfo, saveWebSetting } from "@/services/geographic";
import LeftAccess from "@/pages/Account/accessSettings/leftAccess";
import RightAccess from "@/pages/Account/accessSettings/rightAccess";

class SiteAccess extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			loading: false,
			info: {},
		};
	}

	componentDidMount() {
		this.getInfo();
	}

	getInfo = () => {
		this.setState({ loading: true }, async () => {
			const { robotId } = this.props;
			const res = await webSettingInfo({ robotId });
			if (!res.winLogo) {
				res.winLogo = "/robotConfigImg/robot.png";
			}
			if (!res.headPath) {
				res.headPath = "/robotConfigImg/robot.png";
			}
			if (!res.userHeadImg) {
				res.userHeadImg = "/robotConfigImg/user.png";
			}
			if (!res.entranceH5Img) {
				res.entranceH5Img = "/robotConfigImg/robot.png";
			}
			if (!res.entranceWebImg) {
				res.entranceWebImg = "/robotConfigImg/kefu.png";
			}
			if (!res.rightMessage) {
				res.rightMessage = "";
			}
			this.setState({ info: res, loading: false }, () => {
				this.LeftAccess.initData(res);
				this.RightAccess.initData(res);
			});
		});
	};

	doSave = async () => {
		const { robotId } = this.props;
		const { info } = this.state;
		//网站接入设置左侧数据
		const leftFormInfo = this.LeftAccess.getFormData();
		const leftOtherInfo = this.LeftAccess.state;

		//网站接入设置右侧数据
		const rightInfo = this.RightAccess.state;

		const obj = {
			winTitle: leftFormInfo.winTitle,
			webWinColor: leftOtherInfo.webWinColor,
			winLogo: leftOtherInfo.winLogo,
			solveFlag: leftFormInfo.solveFlag,
			showFlag: leftFormInfo.showFlag,
			isSimilar: leftFormInfo.isSimilar,
			voiceEnable: leftFormInfo.voiceEnable,
			sideShow: leftFormInfo.sideShow,
			headPath: leftOtherInfo.headPath,
			userHeadImg: leftOtherInfo.userHeadImg,
			winSize: leftFormInfo.winSize,
			rightMessage: leftFormInfo.rightMessage,
			voiceList: this.LeftAccess.state.voiceSetUp
				? [
						{
							voiceType: 0,
							appId: leftFormInfo.wxAppId,
							appKey: leftFormInfo.wxAppKey,
						},
						{
							voiceType: 1,
							appId: leftFormInfo.qyWxAppId,
							appKey: leftFormInfo.qyWxAppKey,
						},
				  ]
				: [],
			entranceFlag: rightInfo.entranceFlag,
			entranceWebImg: rightInfo.entranceWebImg,
			entranceH5Img: rightInfo.entranceH5Img,
			entranceWebSeat: rightInfo.entranceWebSeat,
			entranceH5Seat: rightInfo.entranceH5Seat,
			iconBottomColor: rightInfo.iconBottomColor,
			robotId,
			id: info.id,
		};

		const res = await saveWebSetting(obj);
		message.info(res.message);
	};

	render() {
		const { loading, info } = this.state;
		const { robotId } = this.props;
		return (
			<div>
				<Spin spinning={loading}>
					<Row style={{ marginTop: 30 }}>
						<Col span={24}>
							<span className={styles.titlep}>
								<span>网站接入设置</span>
							</span>
						</Col>
					</Row>
					<Row style={{ marginTop: 30 }}>
						<Col span={12} style={{ borderRight: "1px solid #e6ecf6" }}>
							<LeftAccess
								info={info}
								onRef={(ref) => (this.LeftAccess = ref)}
								robotId={robotId}
							/>
						</Col>
						<Col span={12}>
							<RightAccess onRef={(ref) => (this.RightAccess = ref)} />
						</Col>
					</Row>
					<Divider />
					<Row>
						<Col span={24} style={{ textAlign: "center" }}>
							<Button type={"primary"} onClick={this.doSave}>
								保存
							</Button>
						</Col>
					</Row>
				</Spin>
			</div>
		);
	}
}

export default SiteAccess;
